<template>
  <contents
    :heightInclude="['navBar', 'tabBar']"
    class="bindChange_page"
    backgroundColor="#fff"
  >
    <u-navbar :custom-back="back" title="更换银行卡"></u-navbar>

    <template v-if="stpe === 1">
      <view class="title">本交易仅支持储蓄卡</view>
      <input
        v-model="form.acctNo"
        @blur="inputBlur"
        type="number"
        placeholder="请输入银行卡账号"
        class="bind-input"
      />
      <view class="bank-info" v-if="bankDetails.id">
        <image class="bank-logo" :src="bankDetails.logoUrl"></image>
        <view class="bank-name">{{ bankDetails.name }}</view>
      </view>
      <SubmitBtn @click="submit" text="下一步" />
    </template>

    <view v-show="stpe === 2">
      <u-form
        :model="form"
        ref="form"
        label-width="165"
        :label-style="{ paddingRight: '15rpx' }"
      >
        <u-form-item label="卡   号" prop="acctNo">
          <u-input v-model="form.acctNo" placeholder="" disabled />
        </u-form-item>
        <u-form-item label="手机号" prop="mobile">
          <u-input
            type="number"
            v-model="form.mobile"
            placeholder="银行预留手机号"
            maxlength="11"
          />
        </u-form-item>
        <u-form-item label="开户行名称" prop="acctBankName">
          <u-input
            v-model="form.acctBankName"
            placeholder="请输入开户行名称"
            maxlength="110"
          />
        </u-form-item>
        <u-form-item label="开户行行号" prop="acctBankNo">
          <u-input
            v-model="form.acctBankNo"
            placeholder="请输入开户行行号"
            maxlength="110"
          />
        </u-form-item>
        <view class="check">
          <u-checkbox-group>
            <u-checkbox v-model="form.check" shape="circle">
              <text style="font-size: 28rpx"
                >同意<text style="color: #b1752d">《平台支付协议》</text></text
              >
            </u-checkbox>
          </u-checkbox-group>
        </view>
      </u-form>
      <SubmitBtn
        @click="submit"
        :disabled="!form.check"
        text="同意协定并验证"
      />
    </view>

    <view v-show="stpe === 3">
      <u-form
        :model="form"
        ref="form1"
        label-width="165"
        :label-style="{ paddingRight: '15rpx' }"
      >
        <view class="mobile_show">发送至手机号 {{ form.mobile }}</view>
        <u-form-item label="短信验证码" prop="bankCode">
          <u-input
            type="number"
            maxlength="6"
            v-model="form.bankCode"
            placeholder="请输入验证码"
          />
          <SetCode slot="right" :phone="form.mobile" uniqueKey="bindCard" />
        </u-form-item>
      </u-form>
      <SubmitBtn @click="submit" text="验证信息" />
    </view>

    <u-modal v-model="showModal" title="" @confirm="confirm" confirm-text="去查看">
      <view
        class="slot-content"
        style="
          display: flex;
          align-items: center;
          flex-direction: column;
          align-items: center;
        "
      >
        <image
          style="width: 72rpx; height: 72rpx"
          src="@/static/images/success.png"
        />
        <view style="font-size: 34rpx; font-weight: 500; margin: 30rpx 0"
          >绑卡成功</view
        >
      </view>
    </u-modal>
  </contents>
</template>
<script>
import SubmitBtn from '@/components/submitBtn'
import SetCode from '@/components/setSmsCode/walletCode'
import { getBankType, doVisAcctBinding } from '@/api/http/wallet'
export default {
  components: {
    SubmitBtn,
    SetCode
  },
  data() {
    const required = [
      {
        required: true,
        message: '此项不能为空',
        trigger: 'blur'
      }
    ]
    return {
      form: {
        check: false
      },

      bankDetails: {},
      bankTrue: false,
      stpe: 1,

      rules: {
        acctNo: required,
        mobile: required,
        acctBankName: required,
        acctBankNo: required,
        bankCode: required
      },

      showModal: false
    }
  },
  onReady() {
    this.$refs.form.setRules(this.rules)
    this.$refs.form1.setRules(this.rules)
  },
  methods: {
    back() {
      uni.showModal({
        title: '',
        content: '确认放弃添加银行卡吗？',
        confirmText: '继续添加',
        cancelText: '确认放弃',
        success: function (res) {
          if (res.cancel) {
            uni.navigateBack()
          }
        }
      })
    },
    inputBlur() {
      if (this.form.acctNo == '') return
      getBankType({
        acctNo: this.form.acctNo
      }).then((res) => {
        if (res.code === 200) {
          this.form.bankName = res.data.name
          this.bankDetails = res.data
          this.bankTrue = true
        } else {
          this.bankDetails = {}
          this.bankTrue = false
          uni.showToast({
            icon: 'none',
            title: res.message
          })
        }
      })
    },
    async submit() {
      if (this.stpe === 1) {
        if (this.form.acctNo == '') {
          uni.showToast({
            icon: 'none',
            title: '请输入银行卡账号'
          })
          return
        }
        if (!this.bankTrue) {
          uni.showToast({
            icon: 'none',
            title: '请输入正确的银行卡账号'
          })
          return
        }
        this.stpe = 2
        return
      }

      if (this.stpe === 2) {
        this.$refs.form.validate((valid) => {
          if (!valid) return
          if (!this.form.check) {
            uni.showToast({
              icon: 'none',
              title: '请同意《平台支付协议》'
            })
            return
          }
          this.stpe = 3
        })
        return
      }

      if (this.stpe === 3) {
        const res = await doVisAcctBinding({
          ...this.form
        })
        if (res.code === 200) {
          this.showModal = true
        } else {
          uni.showToast({
            icon: 'none',
            title: res.message
          })
        }
      }
    },

    confirm() {
      uni.navigateTo({
        url: "/pages/wallet/balance",
      });
    }
  }
}
</script>
<style lang="scss">
.bindChange_page {
  box-sizing: border-box;
  .title {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    padding: 34rpx;
  }

  .bind-tos {
    padding: 0 34rpx;
    line-height: 60rpx;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #777777;
  }

  .bind-input {
    margin: 0 34rpx;
    height: 110rpx;
    background: #f4f5f7;
    border-radius: 14rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #444444;
    line-height: 110rpx;
  }

  .bank-info {
    display: flex;
    align-items: center;
    height: 100rpx;
    padding-left: 30rpx;

    .bank-logo {
      width: 28rpx;
      height: 28rpx;
    }

    .bank-name {
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #565656;
      margin-left: 10rpx;
    }
  }

  .u-form {
    padding: 0 30rpx;
    background-color: #fff;
  }

  .check {
    height: 100rpx;
    line-height: 100rpx;
  }

  .mobile_show {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #777777;
    margin: 30rpx 0;
  }
}
</style>